<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户登录</title>
<script src="../JS/vue.js"></script>
<script type="text/javascript" src="../JS/axios.min.js"></script>

</head>
<body>
<style type="text/css">
body{
font-family:微软雅黑;
font-size:14px;}
.title{
font-size:18px;
line-height:50px;
margin-left:130px;}
.one{ 
	margin:10px 0;
}
.one label{ 
	width:100px; 
	float:left; 
	text-align:right;
 	height:20px; 
 	line-height:20px;
}
.two{
 	padding-left:120px;
}
</style>


</head>
<body>
<div id="box">
	<div class="title">用户登录</div>
	<form>
		<div class="one">
			<label for="type">用户名：</label>
			<input type="text" v-model="username">
		</div>
		<div class="one">
			<label for="type">密码：</label>
			<input type="password" v-model="pwd">
		</div>
		<div class="two">
			<input type="button" value="登录" @click="login">
			<input type="reset" value="重置">
		</div>
	</form>
</div>
<script type="text/javascript">
var vm = new Vue({
	el: '#box',
	data: {
		username: '',
		pwd: ''
	},
	methods: {
		login: function(){
			if (this.username == "" || this.pwd == "") {
       			alert("请输入用户名或密码");
    		} else {
				axios({
					method: 'post',
					url: 'searchrst.php',//请求服务器URL
					//传递的数据
					data: 'username='+this.username+'&pwd='+this.pwd
				}).then(function(response){
					if(response.data){//根据服务器返回的响应判断登录结果
						alert("登录成功！");
					}else{
						alert("您输入的用户名或密码不正确！");
					}
				}).catch(function(error){
					alert(error);
				});
			}
		}
	}
});
</script>








</body>
</html>